import "@/plugins/z-dragxml/components/ZDragLoop/index.scss"
import {createZDragLoopDef, createZDragLoopTemplate} from "@/plugins/z-dragxml/components/ZDragLoop";
import {nextTick} from "vue";
import {QuickBooleanWithNull} from "@/hooks/props";



let def = createZDragLoopDef(
  {
    entiels: [
      // ['对象', 'obj'],
      ['数组对象', 'arrayObj'],
      ['GRID', 'grid'],
      // ['GRID-ITEM', 'gridItem'],
    ],
    resolveData(data) {
      data.INIT_CONFIG= {
        ui: {
          defType: 'grid',
          defTypeName: 'fieldset',
          defTypeTag: 'z-fieldset'
        }
      }
      // console.log('ZDragTab', data)
      return data
    },
    // disabledDrag: true
  },
)
def.name = "ZDragSPanel"
def.template = createZDragLoopTemplate({
  cls: 'z-dragxml-com-auto z-drag-loop--c-header z-drag-loop--panel',
  actionXml: `<div>({{zdrag__GET_CONFIG('ui.fid')}})</div>`,
  conXml: ``
})
def.DRAG_PANEL_CLS =  'panel__z-drag-loop panel__z-drag-panel panel__z-drag-fieldset'
def.DRAG_GROUP =  'high'
// def.methods.zdragLayoutCls = function () {
//   // console.log(this.zdrag__cus_config)
//   let control = ZY.lodash.get(this.zdrag__cus_config, 'ui.widgetConfig.control')
//   if (control) {
//     try {
//       let obj = ZY.JSON5.parse(control)
//       // console.log(obj)
//       let ret = {
//         ['z-dragxml-loop__row']: obj.flow === 'row',
//         ['z-dragxml-loop__flex-wrap_' + (obj.flexWrap ?? '')]: 1
//       }
//       // if (obj.flow === 'row') {
//       //   ret.display = 'flex'
//       // }
//       return ret
//     } catch (e) {
//       return {}
//     }
//   }
//   return {
//   }
// }
// def.methods.zdragLayoutStyle = function () {
//   // console.log(this.zdrag__cus_config)
//   let control = ZY.lodash.get(this.zdrag__cus_config, 'ui.widgetConfig.control')
//   if (control) {
//     try {
//       let obj = ZY.JSON5.parse(control)
//       // console.log(obj)
//       let ret = {
//       }
//       let widthArr = [];
//       let len = obj.layouts.length;
//
//       if (Array.isArray(obj.layouts)) {
//         obj.layouts.forEach((layout, index) => {
//           widthArr[index] = (layout.value / 24) * 100 + '%'
//         })
//       }
//
//       for (let i = 0;  i < 50; i++) {
//         let x = i % len
//         ret[`--z-grid-item-${i + 1}`] = widthArr[x]
//       }
//
//       return ret
//     } catch (e) {
//       return {}
//     }
//   }
//   return {
//   }
// }
def.methods.onCreated = function () {
  // console.log('onCreated',  this.zdrag__GET_CONFIG('ui', {}))
  // let self = this
  // if (!this.widgets || this.widgets.length < 1) {
  //   let ctx = {
  //     // handleObj(obj) {
  //     //   // console.log('ctx', obj)
  //     //   obj.afterAttr = ` defType="gridItem" `
  //     //   return obj
  //     // }
  //   }
  //   this.private_append_widget('ZDragTabItem', ctx)
  //   this.private_append_widget('ZDragTabItem', ctx)
  //   nextTick(() => {
  //     setTimeout(() => {
  //       self.ZDragxmlInstance.reloadTreeMenu()
  //     }, 50)
  //   })
  // }
}
def.methods.appendColumn = function () {
  // alert(1)
  this.private_append_widget('ZDragTabItem', {})
  nextTick(() => {
    setTimeout(() => {
      self.ZDragxmlInstance.reloadTreeMenu()
    }, 50)
  })
}
let _oldDragUICONFIG = def.DRAG_UI_CONFIG;
def.DRAG_UI_CONFIG = function (current) {
  // console.log('current', current)
  // let instanse = null
  // if (current?.uuid) {
  //   instanse = DRAG_INSTANSE.getRegisterCtx(current?.uuid)
  // }

  let ret = _oldDragUICONFIG()
  // console.log(ret)
  // ret.control = {
  //   type: 'string',
  //   ui: {
  //     label: ' ',
  //     form_item: {
  //       labelWidth: "0px"
  //     },
  //     widget: 'CusGridControl',
  //     widgetConfig: {
  //       ctxUUID: current?.uuid
  //     }
  //   }
  // }
  ret.fid = {
    type: 'string',
    ui: {
      label: 'ID',
      class: [
        // 'zdragxml__prop__l1',
      ]
    }
  }
  return ret
}
let _oldDragCONFIG = def.DRAG_CONFIG;
def.DRAG_CONFIG = function (current) {
  let ret = _oldDragCONFIG();
  ret.link = {
    type: 'string',
    ui: {
      label: ' ',
      widget: 'CusPanelControl',
      widgetConfig: {},
      form_item: {
        labelWidth: '0px'
      }
    }
  }
  ret.defaultShow = QuickBooleanWithNull('默认显示')
  return {
    props: ret
  }
}

def.DRAG_LABEL_XML = function () {
  return `<div class="z-dragxml-row">
<svg t="1647843206909" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5389" width="16" height="16"><path d="M857.7 233.1H658.4c-14.8 0-27.8-10-31.5-24.4C598.4 98.5 498.4 17.1 379.3 17.1h-225c-59.2 0-107.2 48-107.2 107.2v775.5c0 59.2 48 107.2 107.2 107.2h703.5c65.8 0 119.2-53.4 119.2-119.2V352.2c-0.1-65.8-53.4-119.1-119.3-119.1zM117.1 124.3c0-20.5 16.6-37.2 37.2-37.2h223.5c50 0 98.2 19.4 133.4 54.9 12.9 13 23.6 27.5 32 43.2 11.6 21.6-4.2 47.8-28.8 47.8H153.6c-20.2 0-36.5-16.4-36.5-36.5v-72.2z m789.8 763.4c0 27.2-22 49.2-49.2 49.2H166.3c-27.1 0-49.2-22.1-49.2-49.2V339.6c0-20.2 16.4-36.5 36.5-36.5h704.2c27.2 0 49.2 22 49.2 49.2v535.4z" p-id="5390"></path><path d="M305.5 434h-46c-20.4 0-37 16.6-37 37v46c0 20.4 16.6 37 37 37h46c20.4 0 37-16.6 37-37v-46c0-20.5-16.6-37-37-37zM766.9 434H452.1c-19.1 0-34.6 15.5-34.6 34.6v50.9c0 19.1 15.5 34.6 34.6 34.6H767c19.1 0 34.6-15.5 34.6-34.6v-50.9c-0.1-19.1-15.6-34.6-34.7-34.6zM305.5 686h-46c-20.4 0-37 16.6-37 37v46c0 20.4 16.6 37 37 37h46c20.4 0 37-16.6 37-37v-46c0-20.5-16.6-37-37-37zM766.9 686H452.1c-19.1 0-34.6 15.5-34.6 34.6v50.9c0 19.1 15.5 34.6 34.6 34.6H767c19.1 0 34.6-15.5 34.6-34.6v-50.9c-0.1-19.1-15.6-34.6-34.7-34.6z" p-id="5391"></path></svg>
<div class="z-dragxml-label__name">Fieldset</div>
</div>`
}
export default def
